<!--修改密码-->
<template>
  <div class="password">
    <form class="loginForm">
      <section class="input_container">
        <input
          type="text"
          placeholder="账号"
          v-model="account"
          autocomplete="on"
        />
      </section>
      <section class="input_container">
        <input
          type="text"
          placeholder="旧密码"
          v-model="oldp"
          autocomplete="on"
        />
      </section>
      <section class="input_container">
        <input
          type="password"
          placeholder="请输入新密码"
          v-model="newp"
          autocomplete="on"
        />
      </section>
      <section class="input_container">
        <input
          type="password"
          placeholder="请确定密码"
          v-model="ynewp"
          autocomplete="on"
        />
      </section>
      <section class="input_container captcha_code_container">
        <input type="text" placeholder="验证码" v-model="code" />
        <div class="validation_div">
          <IdentifyCode
            :identify-code="identifyCode"
            :content-width="90"
            :content-height="35"
          ></IdentifyCode>
          <div class="mag">
            <span class="code hui" @click="refreshCode"> 看不清 </span>
            <span class="code blue" @click="refreshCode"> 换一张 </span>
          </div>
        </div>
      </section>
    </form>

    <div class="login_container" @click="changeclick">确定修改</div>
  </div>
</template>

<script>
import IdentifyCode from "vue-identifycode"; // 引入包

export default {
  name: "Password",
  components: { IdentifyCode },
  data() {
    return {
      identifyCode: "",
      inp_val1: "",
      inp_val2: "",
      bull: false,
      show: false,
      message: "无效的兑换码",
      xian: false,
    };
  },
  computed: {
    dateRange() {
      const { inp_val1, inp_val2 } = this;
      return { inp_val1, inp_val2 };
    },
  },
  watch: {
    dateRange(val) {
      if (val.inp_val1 != null) {
        if (val.inp_val2.length == 4) {
          this.bull = true;
        } else {
          this.bull = false;
        }
      } else {
        this.bull = true;
      }
    },
  },
  mounted() {
    this.identifyCode = this.createCode();
  },
  methods: {
    // 修改
    changeclick() {
      if (
        localStorage.getItem("account") == this.account &&
        this.account != undefined
      ) {
        if (this.oldp == 1017) {
          if (this.newp == this.ynewp) {
            if (this.code == this.identifyCode) {
                this.$router.push({name:"Upload"})
            } else {
              alert("验证码错误");
            }
          } else {
            alert("新密码不一致");
          }
        } else {
          alert("旧密码错误！！！");
        }
      } else {
        alert("用户名错误！！！");
      }
    },
    createCode() {
      let code = "";
      const codeLength = 4; // 验证码的长度
      // eslint-disable-next-line no-array-constructor
      const random = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9); // 随机数
      for (let i = 0; i < codeLength; i++) {
        // 循环操作
        const index = Math.floor(Math.random() * 9); // 取得随机数的索引（0~35）
        code += random[index]; // 根据索引取得随机数加到code上
      }
      return code;
    },
    refreshCode() {
      this.identifyCode = this.createCode();
    },
    exchangeclick() {
      this.show = true;
    },
    fanhuiclick() {
      this.show = false;
    },
  },
};
</script>

<style lang="less">
body,
html {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
}
.password {
  .loginForm {
    background-color: #fff;
    margin-top: 0.6rem;

    .input_container {
      display: flex;
      justify-content: space-between;
      padding: 14px 18px;
      border-bottom: 1px solid #f1f1f1;

      input {
        font-size: 18px;
        border: none;
        color: #666;
        outline: none;
        width: 200px;
      }
      .validation_div {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .mag {
          margin-left: 8px;
          height: 35px;
          .blue {
            color: #3b95e9;
          }
        }
      }
      .privacy {
        background-color: #ccc;
        display: flex;
        justify-content: center;
        width: 2rem;
        height: 1.2rem;
        padding: 0 0.2rem;
        border: 1px;
        border-radius: 2.5rem;
        position: relative;

        .privacy_div {
          transition: all 0.3s;
          position: absolute;
          top: 0px;
          z-index: 1;
          left: -0.3rem;
          width: 1.2rem;
          height: 1.2rem;
          box-shadow: 0 0.02667rem 0.05333rem 0 rgba(0, 0, 0, 0.1);
          background-color: #f1f1f1;
          border-radius: 50%;
        }
      }
      .qie {
        background-color: #4cd964;
        .privacy_div {
          left: 1.5rem;
        }
      }
    }

    .captcha_code_container {
      font-size: 12px;
    }
  }

  .login_container {
    margin: 80px 0.5rem 1rem;
    font-size: 20px;
    color: #fff;
    background-color: #4cd964;
    padding: 0.5rem 0;
    border: 1px;
    border-radius: 0.15rem;
    text-align: center;
  }

  .reset {
    float: right;
    font-size: 0.6rem;
    color: #3b95e9;
    margin-right: 0.3rem;
  }
}
</style>